<template>
  <view class="main">
		<view>
			<up-sticky bgColor="#fff">
			  <up-tabs :list="listData"></up-tabs>
			</up-sticky>
		</view>
		<view class="weather">
			当前位置，天气情况
		</view>
		<view class="">
			<view>
				设备
			</view>
			<view class="equipments-style">
				<view v-for="(i, index) in equipment" class="equipment" @click.stop="goToPage(i)">
					<view>
						<view class="equipment-title">
							<up-icon :name="i.icon" size="28"></up-icon>
							<up-switch v-model="i.switchValue" size="20"></up-switch>
						</view>
						<view class="equipment-text">
							{{i.name}}
						</view>
					</view>
				</view>
				<view class="equipment" @click.stop="addEqu()">
					<view class="equipment-add">
						<up-icon name="plus"></up-icon>
						<view class="equipment-text">
							添加设备
						</view>
					</view>
				</view>
			</view>
		</view>
		<tabbar></tabbar>
  </view>
</template>

<script setup>
	
import tabbar from '@/components/tabbar/index/index.vue'
import useAddEquipmentsTabbarStore from '@/stores/tabbar/addEquipment.js';
import { reactive, ref } from 'vue';
import { onMounted } from 'vue';
import { test } from '@/api/user';

onMounted(() => {
  console.log('组件已挂载');
	uni.getLocation({
	  type: 'wgs84',
	  success: function (res) {
	    console.log('当前位置的经度：' + res.longitude);
	    console.log('当前位置的纬度：' + res.latitude);
	  }
	});
});

const listData = reactive([
	{ name: '客厅'},
	{ name: '厨房'},
	{ name: '卧室'}
])

const equipment = reactive([
	{ name: '灯带', icon: 'shopping-cart', switchValue: true, type: 'led' },
	{ name: '音响', icon: 'mic', switchValue: false, type: 'mic' },
	{ name: '开关', icon: 'lock', switchValue: false, type: 'switch' },
])

const goToPage = (e) => {
	console.log(e.type)
	switch(e.type) {
		case 'led' :
			uni.navigateTo({
				url: '/pages/equipments/led/led'
			});
			break;
		default: 
			test()
	}
}

const addEqu = () => {
	const tabbarStore = useAddEquipmentsTabbarStore();
	tabbarStore.setActive(0);
	uni.switchTab({
		url: '/pages/equipments/addEquipment/bluetooth/bluetooth'
	})
}
</script>

<style>
.main{
	padding: 10px;
	height: 100%;
}
.equipments-style{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.equipment-title{
	display: flex;
	justify-content: space-around;
	align-items: center;
	margin-top: 10px;
}
.equipment-text{
	font-size: 18px;
	margin: 0px 5px 0px 5px;
}
.equipment-add{
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}
.equipment{
	background-color: #fff;
	width: 49%;
	height: 100px;
	margin-top: 10px;
	border-radius: 10px;
}

</style>
